<template>
    <div class="tiny_test">
      <editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></editor>
      <div @click="show_insert">我输入了啥</div>
    </div>
</template>

<script>
  import tinymce from 'tinymce/tinymce'
  import   'tinymce/plugins/image'
  import   'tinymce/plugins/lists'
  import   'tinymce/plugins/image'
  import   'tinymce/plugins/code'
  import   'tinymce/plugins/table'
  import   'tinymce/plugins/colorpicker'
  import   'tinymce/plugins/textcolor'
  import   'tinymce/plugins/wordcount'
  import   'tinymce/plugins/contextmenu'
  import 'tinymce/themes/modern/theme'
  import Editor from '@tinymce/tinymce-vue'
  //import './socket.io.js'
  import io from 'socket.io-client';
    export default {
      name: "tinymce_excl",
      data() {
          return {
            tinymceHtml:'',
            array_excl:[],
            socket:'',
            editorInit: {
              language_url: '/static/tinymce/zh_CN.js',
              language: 'zh_CN',
              skin_url: '/static/tinymce/skins/lightgray',
              height: 300,
            //  plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
              toolbar:
                ' mybutton | undo redo |  removeformat | formatselect | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | link unlink image code ',
              branding: false,
              setup: function (editor) {
                editor.addButton('mybutton', {
                  text: 'My button',
                  icon: false,
                  onclick: function () {
                    editor.insertContent('&nbsp;<b>It\'s my button!</b>&nbsp;');
                  }
                });
              }
            }
          }
      },
      mounted() {
        tinymce.init({})
        let _this = this
        this.get_webSocket()
        this.socket.on('message', function(msg){
          _this.tinymceHtml = msg
        });
        this.creat_excel()
       // this.init_array()
       // this.array_to_dom()
      },
      watch:{
        /*tinymceHtml(newVal,oldVal){
          console.log('tinymceHtml变了')
          this.socket.emit('message',this.tinymceHtml );
          this.tinymceHtml = newVal
        }*/
      },
      methods: {
        show_insert(){
          this.socket.emit('message',this.tinymceHtml );
        },
        get_webSocket(){
          this.socket = io('http://localhost:3001');
        },
        creat_excel(){
          this.tinymceHtml = '<table></table>'
          for (var i=0; i<6; i++) {
            var row = document.querySelector("table").insertRow(-1);
            for (var j=0; j<6; j++) {
              var letter = String.fromCharCode("A".charCodeAt(0)+j-1);
              row.insertCell(-1).innerHTML = i&&j ? "" : i||letter;
            }
          }
          var DATA={}, INPUTS=[].slice.call(document.querySelectorAll("input"));
          INPUTS.forEach(function(elm) {
            elm.onfocus = function(e) {
              e.target.value = localStorage[e.target.id] || "";
            };
            elm.onblur = function(e) {
              localStorage[e.target.id] = e.target.value;
              computeAll();
            };
            var getter = function() {
              var value = localStorage[elm.id] || "";
              if (value.charAt(0) == "=") {
                with (DATA) return eval(value.substring(1));
              } else { return isNaN(parseFloat(value)) ? value : parseFloat(value); }
            };
            Object.defineProperty(DATA, elm.id, {get:getter});
            Object.defineProperty(DATA, elm.id.toLowerCase(), {get:getter});
          });
          (window.computeAll = function() {
            INPUTS.forEach(function(elm) { try { elm.value = DATA[elm.id]; } catch(e) {} });
          })();
        },
        init_array(){
          for(let i=0;i<200;i++){
            this.array_excl[i] = []
            for(let j=0;j<18;j++){
              this.array_excl[i][j] = 1
            }
          }
        },
      /*  array_to_dom(){
          //console.log(this.array_excl)1
          for(let i=0;i<200;i++){
            for(let j=0;j<18;j++){
              if(this.array_excl[i][j] === 1){
                 // console.log(1)
                let topWidth = 0
                let bottomWidth = 1
                let leftWidth = 0
                let rightWidth = 1
                if(i === 0 ){
                  topWidth = 1
                }
                if(j === 0){
                  leftWidth = 1
                }
                this.tinymceHtml += `
                    <div class="base" style="display:inline-block; width: 100px;height: 25px;
                    position:absolute;top:${(i+1) * 25}px; left:${(j+0.5) * 100}px;
                    border-top: ${topWidth}px solid rgba(0,0,0,0.27);
                    border-bottom: ${bottomWidth}px solid rgba(0,0,0,0.27);
                    border-left: ${leftWidth}px solid rgba(0,0,0,0.27);
                    border-right: ${rightWidth}px solid rgba(0,0,0,0.27);
                    line-height: 25px;overflow:hidden">
                    </div>
                  `
              }
            }

          }
        }*/
      },
      components:{
        Editor
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">


</style>
